<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="./common/underscore.js"></script>
		<script type="text/javascript" src="./common/backbone.js"></script>

		<link rel="stylesheet" href="../../codebase/webix.css" type="text/css" media="screen" charset="utf-8">
		<script src="../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>

		<title>Backbone integration - Nested Views</title>
	</head>
	<body>
		<div style="height:300px" class="app1_here"></div>
		<br>
		<div style="height:300px" class="app2_here"></div>

		<script type="text/javascript" charset="utf-8">
			webix.ready(function(){

				var ui_config ={
					isolate:true, type:"wide", rows:[
						{ template:"top", height:35 },
						{ type:"wide", cols:[
							{ template:"left", id:"left" },
							{ template:"center", id:"center" },
							{ template:"right", id:"right" }
						]},
						{ template:"bottom", height:35 }
					]
				};

				//html child view
				cView = Backbone.View.extend({
				    tagName: "h2",
					render: function(){
				        $(this.el).html("Child View");
				    },
				});

				//create top level view
				var v1 = new WebixView({
						config: ui_config,
						el: ".app1_here"
					});
					v1.render();

				//create child view
				var v2 = new cView();
					v2.render();
					v1.getChild("left").setContent(v2.el);


				//create child webix view
				var v3 = new WebixView({
						config: ui_config,
						el:v1.getChild("right")
					});
					v3.render();
			});
		</script>
	</body>
</html>